<!DOCTYPE html>
<html>
<head>
<title>Electron Path in Magnetic Field</title>
</head>
<body>
<canvas id="physicsCanvas" width="650" height="500"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrowhead at a specific point on the path, pointing in the path's direction.
    function drawArrow(ctx, x, y, dx, dy, size) {
        const angle = Math.atan2(dy, dx);
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        // The arrowhead is drawn pointing towards the origin from the translated point.
        // This makes it point along the direction vector when placed on the path.
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2.5);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2.5);
        ctx.stroke();
        ctx.restore();
    }
    
    // --- Main Drawing ---

    // Style settings
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';

    // 1. Draw the region of uniform magnetic field
    const regionX = 270;
    const regionY = 100;
    const regionW = 220;
    const regionH = 220;
    ctx.fillStyle = '#E0E0E0'; // Light grey
    ctx.fillRect(regionX, regionY, regionW, regionH);
    ctx.fillStyle = 'black'; // Reset fillStyle for text

    // 2. Define and draw the path of the electron
    const startX = 40;
    const startY = 200;
    const entryX = regionX;
    const entryY = startY;
    const exitX = regionX + regionW;
    const exitY = 280; // Manually set exit Y to look like the image
    const endX = 620;

    // Control point for the quadratic Bezier curve.
    // The tangent at the start of the curve is horizontal, so the control point's y-coordinate is the same as the entry point's.
    // The x-coordinate of the control point determines the curvature.
    const controlX = entryX + (exitX - entryX) * 0.5; // Place control point halfway in x
    const controlY = entryY;
    
    // Calculate the slope at the exit point to draw the final straight line tangent to the curve.
    const slope = 2 * (exitY - controlY) / (exitX - controlX); // Derivative of quadratic Bezier at the end (t=1)
    const endY = exitY + slope * (endX - exitX);

    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(entryX, entryY);
    ctx.quadraticCurveTo(controlX, controlY, exitX, exitY);
    ctx.lineTo(endX, endY);
    ctx.stroke();

    // 3. Draw arrows on the path to indicate direction
    const arrowSize = 10;
    
    // Arrow 1: On the initial straight path
    drawArrow(ctx, 165, startY, 1, 0, arrowSize); 
    
    // Arrow 2: On the curved path (calculated at parameter t=0.75 of the Bezier curve)
    const t_arrow = 0.75;
    const arrowCurveX = Math.pow(1 - t_arrow, 2) * entryX + 2 * (1 - t_arrow) * t_arrow * controlX + Math.pow(t_arrow, 2) * exitX;
    const arrowCurveY = Math.pow(1 - t_arrow, 2) * entryY + 2 * (1 - t_arrow) * t_arrow * controlY + Math.pow(t_arrow, 2) * exitY;
    // Tangent vector at that point
    const tangentDx = 2 * (1 - t_arrow) * (controlX - entryX) + 2 * t_arrow * (exitX - controlX);
    const tangentDy = 2 * (1 - t_arrow) * (controlY - entryY) + 2 * t_arrow * (exitY - controlY);
    drawArrow(ctx, arrowCurveX, arrowCurveY, tangentDx, tangentDy, arrowSize);

    // Arrow 3: On the final straight path
    const finalArrowX = exitX + (endX-exitX)*0.4;
    const finalArrowY = exitY + slope * (finalArrowX-exitX);
    drawArrow(ctx, finalArrowX, finalArrowY, endX - exitX, endY - exitY, arrowSize);

    // 4. Add labels and pointers
    ctx.font = '22px Arial';

    // Label for "path of electron"
    ctx.textAlign = 'left';
    ctx.fillText('path of', 50, 185);
    ctx.fillText('electron', 50, 210);
    
    // Label for "region of uniform magnetic field"
    ctx.textAlign = 'left';
    ctx.fillText('region of uniform', 420, 80);
    ctx.fillText('magnetic field', 420, 105);

    // Pointer line for the region label
    ctx.beginPath();
    ctx.moveTo(420, 110);
    ctx.lineTo(380, 140);
    ctx.stroke();
    
    // Label "Fig. 9.1"
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 9.1', canvas.width / 2, 450);

</script>
</body>
</html>